{include file="index@/public/header" /}
<style>
	body {
		background: #e1e0de;
	}

	* {
		box-sizing: border-box;
	}

	h1,
	h2,
	h3,
	h4 {
		font-weight: 700 !important;
	}

	.layui-card-header {
		width: 100%;
		border-bottom: 1px solid #999 !important;
		padding-left: 5px;
	}

	.layui-card {
		padding: 10px 20px 50px;
	}

	p {
		margin: 0 0 10px !important;
	}

	.layui-container {
		padding: 0 !important;
	}

	img {
		max-width: 100%;
	}

	::-moz-selection {
		background: #cccccc;
		color: #ffffff;
	}

	::selection {
		background: #cccccc;
		color: #ffffff;
	}

	.layui-breadcrumb {
		padding-left: 5px;
	}

	.layui-card h1 {
		margin: 10px auto 0;
	}

	.description {
		font-size: 15px;
		font-weight: bold;
		margin: 20px 0;
	}

	.layui-col-xs1,
	.layui-col-sm1,
	.layui-col-md1,
	.layui-col-lg1,
	.layui-col-xs2,
	.layui-col-sm2,
	.layui-col-md2,
	.layui-col-lg2,
	.layui-col-xs3,
	.layui-col-sm3,
	.layui-col-md3,
	.layui-col-lg3,
	.layui-col-xs4,
	.layui-col-sm4,
	.layui-col-md4,
	.layui-col-lg4,
	.layui-col-xs5,
	.layui-col-sm5,
	.layui-col-md5,
	.layui-col-lg5,
	.layui-col-xs6,
	.layui-col-sm6,
	.layui-col-md6,
	.layui-col-lg6,
	.layui-col-xs7,
	.layui-col-sm7,
	.layui-col-md7,
	.layui-col-lg7,
	.layui-col-xs8,
	.layui-col-sm8,
	.layui-col-md8,
	.layui-col-lg8,
	.layui-col-xs9,
	.layui-col-sm9,
	.layui-col-md9,
	.layui-col-lg9,
	.layui-col-xs10,
	.layui-col-sm10,
	.layui-col-md10,
	.layui-col-lg10,
	.layui-col-xs11,
	.layui-col-sm11,
	.layui-col-md11,
	.layui-col-lg11,
	.layui-col-xs12,
	.layui-col-sm12,
	.layui-col-md12,
	.layui-col-lg12 {
		padding-right: 5px;
		padding-left: 5px;
	}

	.layui-textarea {
		resize: none !important;
	}

	@media screen and (max-width: 800px) {
		.layui-card-header {
			line-height: normal !important;
			font-size: 10px !important;
		}

		.content-bottom {
			flex-direction: column;
		}
	}



	.body-top-type {
		background-color: #EFEFEF;
		margin-top: 5px;
		height: auto;
		padding: 5px;
		overflow: hidden;
		border: 1px solid #E4E3E2;

	}

	.body-top-type-content {
		margin-top: 5px;
	}

	.body-top-type-content-list {
		margin-bottom: 3px;
		border: 1px solid #E4E3E2;
		width: 80%;
		background-color: #ffffff;
		height: 50px;
		line-height: 50px;
		padding: 3px 0px;
		border-radius: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		cursor: pointer;
	}

	.body-top-type-content-list img {
		width: 42px;
		height: 42px;
		float: left;
		margin-left: 2px;
		margin-right: 5px;
	}


	.layui-table,
	.layui-table-view {
		margin: 0;
	}

	.body-buttom-title {
		color: #333333;
		padding-left: 15px;
		line-height: 30px;
	}

	.layui-table td,
	.layui-table th {
		font-size: 12px;
	}

	.layui-table-cell {
		text-align: center;
	}

	.layui-laypage-curr em {
		color: #000 !important;
		background-color: #F2F2F2 !important;
	}

	.layui-table-main .laytable-cell-1-0-0 {
		color: #13A1D9;
	}

	.layui-table-main {
		cursor: pointer;
	}

	#backtop {
		width: 55px;
		height: 60px;
		background: rgba(0, 0, 0, 0.3);
		color: #fff;
		text-align: center;
		border-radius: 2px;
		border: none;
		box-shadow: none;
		position: fixed;
		top: 40%;
		right: 10px;
		cursor: pointer;
		line-height: 18px;
	}

	.layui-nav {
		background-color: #fff;
		width: 100%;
	}

	.layui-nav a {
		color: #333333 !important;
	}

	.layui-nav-itemed>.layui-nav-child {
		background-color: #fff !important;
		text-align: center;
	}


	.layui-nav-item a:hover {
		background-color: #EFEFEF !important;
	}

	.layui-nav-itemed .layui-nav-more {
		border-color: transparent transparent #1372B0 !important;
	}

	.layui-nav-more {
		border-color: #1372B0 transparent transparent !important;
	}

	.layui-nav {
		border: 1px solid #E4E3E2;
	}

	.layui-nav-child {
		overflow: hidden;
	}

	.layui-nav-child img {
		width: 100px;
	}

	.body-buttom-left-body-input {
		margin: 10px 0px;
		width: 76%;
		margin-left: 12%;
	}

	.body-buttom-left-body-input input {
		width: 100%;
		height: 36px;
		border-radius: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border: 1px solid #EFEFEF;
		outline: 0;
		padding-left: 10px;
	}

	.body-buttom-left-body-input input::-webkit-input-placeholder {
		font-size: 12px;
	}

	.body-buttom-left-body-sel div {
		padding: 0px 5px;
		cursor: pointer;
	}

	.body-buttom-left-body-sel span {
		font-size: 12px;
	}

	.body-buttom-left-body-sel {
		height: 130px;
		width: 100%;
		text-align: left;
		color: #61A1CB;
		overflow-y: auto;
	}

	.layui-nav-child {
		line-height: 17px;
	}

	.body-buttom-left-body-sel div img {
		width: 10px;
		float: left;
		margin-top: 2px;
	}

	.body-buttom-left-body-title {
		padding: 0 10px;
		line-height: 30px;
		background-color: #EFEFEF;
		width: 100%;
		border-bottom: 2px solid #fff;
		font-weight: bold;
	}

	.all_clear {
		float: right;
		color: #1372b0;
		cursor: pointer;
		font-size: 12px;
	}

	.body-buttom-title {
		border-width: 1px;
		border-style: solid;
		border-color: #e6e6e6;
	}

	.bottom {
		margin-bottom: 20px;
	}

	.layui-nav-tree .layui-nav-bar {
		background-color: #36648A;
	}

	.layui-nav-tree .layui-nav-item a {
		background-color: #EFEFEF;
	}

	.maodian {
		position: relative;
		top: -61px;
		display: block;
		height: 0;
		overflow: hidden;
	}

	.maodian1 {
		position: relative;
		top: -80px;
		display: block;
		height: 0;
		overflow: hidden;
	}

	#seltitle .seltitle-t {
		height: 20px;
		line-height: 20px;
	}

	#seltitle .seltitle-d {
		height: 20px;
		line-height: 20px;
	}

	#seltitle .body-top-type-content-list:hover {
		background-color: #36648A;
		color: #ffffff;
	}

	.hang {
		cursor: pointer;
	}

	.hang:hover {
		background-color: #36648A;
	}

	.hang a {
		color: #333;
	}

	.hang .Product_Number {
		color: #36648A;
	}

	.hang:hover a {
		color: #ffffff;
	}

	.hang:hover .Product_Number {
		color: #ffffff;
	}

	.price {
		color: #19792f
	}

	.layui-card-body {
		padding: 10px 5px;
	}

	.lista {
		text-align: left;
		padding: 5px 0px
	}

	/*  WHD */
	.content-bottom {
		/* margin-top: 3rem; */
		overflow: hidden;
	}

	.Bearings-card {
		margin: .5rem;
		width: 21.875rem;
		height: 7rem;
		padding: .5rem;
		box-sizing: border-box;
		border: 1px solid #ccc;
		border-radius: 8px;
	}

	.Bearings-card:hover {
		border: 1.5px solid #36648A !important;
	}

	.Bearings-card a {
		text-decoration: none;
	}

	.Bearings-card-font {
		font-size: 18px;
		color: #36648a;
	}
	.Bearings-content-font {
	    display: inline-block;
	    font-size: 0.775rem;
	    padding: .5rem;
	    line-height: 1.1rem;
		color: #333333;
	}

	.Bearings-card-img {
		width: 4.8rem;
	}

	.Bearings-card-bottom {
		display: flex;
		justify-content: space-around;
	}

	.Bearings-card-bottom>div {
		display: flex;
		align-items: center;
		justify-content: center;
		font: 12px/14px arial, helvetica, sans-serif;
		color: #333;
	}
</style>
<div class="layui-container" style='font: 12px/14px arial,helvetica,sans-serif;'>
	<div class="layui-card">
		<span class="layui-breadcrumb" lay-separator="/">
      <a href="/" style="font: 12px/14px arial,helvetica,sans-serif;">{:lang('Home')}</a>
      {foreach $crumbs as $k=>$v }
      <a href="/{$v['crumbs_url']}" style="font: 12px/14px arial,helvetica,sans-serif;color:#36648A">{$v['alias_name']}</a>
      {/foreach}
    </span>
		<div class="layui-card-header">
			<h1>{:lang('Ceramic bearings')}</h1>
		</div>

		<div class="content-bottom">

			<a href="/resources/technology/ceramic-bearings/ceramic-balls-grades/">
				<div class="Bearings-card"  style="float:left;">
					<div class="Bearings-card-font">
						{:lang('Ceramic Balls Grades')}
					</div>
					
					<div class="Bearings-card-bottom">
						<img style="margin-top: 10px;" class="Bearings-card-img" src="{:Config::get('app.images_host')}/images/class/1660284923078.jpg"    alt="" width="60px" height="60px">
						<div style="margin-top: 10px;color: #333;"></div>
					</div>
				</div>
			</a>
			



			<a href="/resources/technology/ceramic-bearings/ceramic-materials-and-their-properties/">
				<div class="Bearings-card"  style="float:left;">
					<div class="Bearings-card-font">
						{:lang('Ceramic Materials and Their Properties')}
					</div>
					
					<div class="Bearings-card-bottom">
						<img style="margin-top: 10px;" class="Bearings-card-img" src="{:Config::get('app.images_host')}/images/class/1660284923078.jpg"    alt="" width="60px" height="60px">
						<div style="margin-top: 10px;color: #333;"></div>
					</div>
				</div>
			</a>

			


		</div>
	</div>

</div>

{include file="index@/public/footer" /}
